const ul = document.querySelector('ul')
const toolinput = document.querySelector('.tool input')

let data = []
data = JSON.parse(localStorage.getItem('commission'))
// localStorage.setItem('commission',JSON.stringify(data))
toolinput.addEventListener('keyup', function (e) {
    if (e.key === 'Enter') {
        ul.innerHTML = ''
        let text = toolinput.value
        let iten = {
            name: text,
        }
        data.push(iten)
        toolinput.value = ''
        colours()
        localStorage.setItem('commission',JSON.stringify(data))
    }
})
//    渲染列表
function colours() {
    for (let i = 0; i < data.length; i++) {
        let name = data[i]
        let lis = document.createElement('li')
        lis.innerHTML = `
            <div>
              <input class="ck" type="checkbox" /><span class="false"
                >${name.name}</span
              >
            </div>
            <button class="del" data-id=${i}>X</button>
        `
        ul.appendChild(lis)
    }
}
colours()



let statistical = 0
const input = document.querySelectorAll('ul input')
const span = document.querySelector('section span')
const b = document.querySelector('section b')
const finished = document.querySelectorAll('.finished')
b.innerHTML = finished.length
span.innerHTML = `${data.length - finished.length}未完成`
ul.addEventListener('click', function (e) {
    if (e.target.tagName === 'INPUT') {
        const vl = e.target.checked
        const lis = e.target.parentNode.parentNode
        lis.classList.toggle('finished')
        const finished = document.querySelectorAll('.finished')
        b.innerHTML = finished.length
        span.innerHTML = `${data.length - finished.length}未完成`
    }
    if (e.target.tagName === 'BUTTON') {
        ul.innerHTML = ''
        const index = e.target.dataset.id
        data.splice(index, 1)
        colours()
        b.innerHTML = finished.length
        span.innerHTML = `${data.length - finished.length}未完成`
        localStorage.setItem('commission',JSON.stringify(data))
    }
})

const a = document.querySelector('a')
a.addEventListener('click',function(){
    for (let i = 0; i < input.length; i++) {
        if (input[i].checked===true) {
            ul.innerHTML = ''
            data.splice(i,1)
            colours()
            b.innerHTML = finished.length
            span.innerHTML = `${data.length - finished.length}未完成`
            localStorage.setItem('commission',JSON.stringify(data))
        }
    }
})

